<!-- 
  1. reactive 数据不能解构使用,会丢失响应式
  2. reactive 数据不能重新赋值,会丢失响应式
  3. reactive 数据的某个属性如果是 ref 数据, 那么他们是关联的
     JS 中操作时会自动解包 (如果是数组或Map格式时不会)
  4. ref() 一般用于基本数据类型, 给 ref 传递一个 对象时,内部会借助 reactive 对该对象做包装.


  Ref 与 Reactive 的区别:

    1. 两者都是Vue3中提供的创建响应式数据的 API 方法.
    2. 两种都不能解构使用,会丢失响应式
    3. Ref 一般用于基本数据类型, Reactive 用于对象类型
    4. Ref 使用时需要操作 .value 属性, Reactive 不需要 .value
    5. Ref 是通过类的 get与set 来处理响应式的, Reactive 是通过 proxy 来处理的

 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="changeCount">{{ count }}</button>
    <button @click="change">修改 person</button>
    <p>{{ person.name }}</p>
    <p>{{ person.age }}</p>
    <p>{{ person.gender }}</p>

    <hr />

    <button @click="getList">GETLIST</button>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(18)

    const personTwo = ref({
      name: '王五'
    })

    console.log('personTwo', personTwo)

    // 通过 reactive 创建响应式数据
    let person = reactive({
      name: '张三',
      age: count,
      gender: 0
    })

    console.log('person.age', person.age) // 18
    console.log('person', person)

    const change = () => {
      person.name = '里斯'
      // person = {
      //   ...person,
      //   name: '里斯'
      // }
      // person = Object.assign({}, person, {
      //   name: '里斯'
      // })
    }

    const changeCount = () => {
      count.value++
    }

    // 通过 reactive 创建一个对象
    const list = ref([])

    const getList = () => {
      // 给 list 赋值
      const result = ['Apple', 'Banana', 'Orange']

      // list.push(...result)
      // list = result

      list.value = result
    }

    return {
      list,
      count,
      person,
      change,
      changeCount,
      getList
    }
  }
}
</script>
